<template>
  <div class="page">
    <uni-nav-bar
      fixed
      status-bar
      :border="false"
    >
      <div class="navigation-title">
        五一欢乐赛排行榜
      </div>
    </uni-nav-bar>
    <div class="container">
      <image
        class="theme-image"
        src="https://ustatic.hudongmiao.com/%20miao/activity/rank-carousel.png"
      />
      <!-- <div class="time-box">活动时间：2025.4.25-5.31</div> -->
      <div
        class="rule-button"
        @click="clickRule"
      >
        规则
      </div>
      <div
        class="reward-button"
        @click="clickReward"
      >
        奖励
      </div>
      <div
        v-if="isLogin"
        class="rank-desc-wrapper"
      >
        <div class="rank-desc">
          <div class="info-wrapper">
            <div class="avatar-wrapper">
              <image
                class="avatar-image"
                :src="personInfo202310.avatar || COMMON_IMG_URL.DEFAULT_AVATAR"
                mode="aspectFill"
              />
            </div>
            <div class="rank-content">
              <div class="content-part1">
                <div class="name-text">
                  {{ personInfo202310.nickname }}
                </div>
                <div class="score-text">
                  {{ "积分：" + personalPeakCompetitionInfo?.score }}
                </div>
              </div>
              <div class="content-part2">
                <div class="distance-text">
                  {{
                    "距离上一名还差：" + personalPeakCompetitionInfo?.distance
                  }}
                </div>
              </div>
            </div>
            <div class="rank-number">
              {{ personalPeakCompetitionInfo?.rank || "99+" }}
            </div>
          </div>
          <div class="tips">
            <text class="text">
              多玩红包口袋游戏更容易增长积分哦
            </text>
          </div>
        </div>
      </div>

      <div class="rank-list-wrapper">
        <div class="rank-list">
          <div class="title">
            <image
              class="title-image"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationLeft.png"
              mode="scaleToFill"
            />
            <text class="title-text">
              当前欢乐赛排名
            </text>
            <image
              class="title-image"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationRight.png"
              mode="scaleToFill"
            />
          </div>
          <text class="tips">
            {{ updateTips }}
          </text>
          <div class="list-head">
            <text class="rank-field">
              名次
            </text>
            <text class="nickname-field">
              昵称
            </text>
            <text class="reward-field">
              奖励
            </text>
          </div>
          <div
            class="list"
            scroll-y
          >
            <div
              v-for="(item, index) in personalPeakCompetitionRankList"
              :key="index"
              class="rank-item"
            >
              <div class="rank">
                <image
                  v-if="index <= 2"
                  class="rank-img"
                  :src="rankBorder(index + 1)"
                />
                <text
                  v-else
                  class="rank-num"
                >
                  {{ index + 1 }}
                </text>
                <div class="avatar">
                  <image
                    class="avatar-img"
                    :src="item.avatar"
                    mode="scaleToFill"
                  />
                </div>
              </div>
              <text class="nickname">
                {{ item.nickname }}
              </text>
              <text
                class="reward"
                :class="{ 'reward--link': item.awardDetailsPopupImg }"
                @click="onClickedReward(item.awardDetailsPopupImg)"
              >
                {{ item.reward }}
              </text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ToLoginMask v-if="!isLogin" />
  <RulesPopup
    ref="rulesPopup"
    :rule-key="ACTIVITY_RULE_KEY.ACTIVITY_202505"
    @popupClose=""
  />
  <ScoreTipsPopup
    ref="scoreTipsPopup"
    @popupClose=""
  />
  <RewardPopup
    ref="rewardPopup"
    @popupClose=""
  />
  <AwardDetailsPopup ref="awardDetailsPopup" />
  <CustomTabBar />
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import RulesPopup from '@/components/activity-202505/RulesPopup.vue';
import RewardPopup from '@/components/activity-202505/rewardPopup.vue';
import ScoreTipsPopup from '@/components/activity-202505/ScoreTipsPopup.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';
import ToLoginMask from '@/components/ToLoginMask.vue';
import AwardDetailsPopup from '@/components/AwardDetailsPopup.vue';
import { HUANLE_RANK_END_TIME } from '@/static/constant/activity-202505-constant';
import { ACTIVITY_RULE_KEY,
  IMG_URL as COMMON_IMG_URL } from '@/static/constant/view-constant';
import { useActivity202505 } from '@/stores/activity-202505-store';
import { useUser } from '@/stores/user';

const rulesPopup = ref<InstanceType<typeof RulesPopup>>();
const scoreTipsPopup = ref<InstanceType<typeof ScoreTipsPopup>>();
const rewardPopup = ref<InstanceType<typeof RewardPopup>>();

const userStore = useUser();
const { isLogin } = storeToRefs(userStore);
const awardDetailsPopup = ref<InstanceType<typeof AwardDetailsPopup>>();
const activity202505Store = useActivity202505();
const {
  setPersonalPeakCompetitionRankList,
  setPersonInfo202310,
  setRankListBroadcastContent,
} = activity202505Store;
const {
  personInfo202310,
  personalPeakCompetitionInfo,
  personalPeakCompetitionRankList,
  personalPeakCompetitionRankListBroadcastContent,
} = storeToRefs(activity202505Store);

/** 检查并获取信息 */
const checkAndGetInfo = async () => {
  if (!personInfo202310.value.userId && isLogin.value) {
    setPersonInfo202310();
  }
  setPersonalPeakCompetitionRankList();

  if (personalPeakCompetitionRankListBroadcastContent.value.length === 0) {
    setRankListBroadcastContent();
  }
};

const onClickedReward = (imgUrl?: string) => {
  if (!imgUrl) return;
  awardDetailsPopup.value?.open(imgUrl);
};

onLoad(async () => {
  // await activity202505Store.setPersonalPeakCompetitionRankList()
  // console.log("排名-------------",personalPeakCompetitionInfo)
});

onShow(async () => {
  await activity202505Store.setYesterdayScoreInfo();
  await checkAndGetInfo();
});

onMounted(() => {
  if (!hasAccessedToday()) {
    recordAccessDate();
    scoreTipsPopup.value?.open();
  }
  // scoreTipsPopup.value?.open()
});

// 排行榜图标
const rankBorder = (rank: number) => `https://ustatic.hudongmiao.com/miao/activity/202505/no-${rank}.png`;

const updateTips = computed(() => {
  const endTime = dayjs(HUANLE_RANK_END_TIME);
  const now = dayjs();
  const diff = endTime.diff(now);
  if (diff > 0) {
    return '（每日24点更新排名）';
  }

  return '互动巅峰赛活动已结束,请继续关注后续活动';
});

// #region 弹窗相关

const currentInstance = getCurrentInstance();

// #endregion

const clickRule = () => {
  rulesPopup.value?.open();
};

const clickReward = () => {
  rewardPopup.value?.open();
};

function recordAccessDate() {
  const today = new Date();
  uni.setStorageSync('accessRecords', JSON.stringify(new Date().toISOString()));
}

function hasAccessedToday() {
  const accessRecordsStr = uni.getStorageSync('accessRecords');
  if (!accessRecordsStr) {
    return false;
  }

  const lastAccessDate = new Date(JSON.parse(accessRecordsStr));
  const today = new Date();
  return (
    lastAccessDate.getFullYear() === today.getFullYear()
    && lastAccessDate.getMonth() === today.getMonth()
    && lastAccessDate.getDate() === today.getDate()
  );
}

// #endregion
</script>
<style scoped lang="scss">
.page {
  position: relative;

  width: 750rpx;
  min-height: 100vh;
  background-color: #faa838;
  overflow-x: hidden;
  overflow-y: scroll;

  @media (min-aspect-ratio: 380/812) {
    min-height: 110vh;
  }
  @media (min-aspect-ratio: 330/568) {
    min-height: 140vh;
  }

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  .navigation-title {
    width: 100%;
    font-size: 34rpx;
    display: flex;
    justify-content: center;
    margin-bottom: 12rpx;
    align-items: center;
    font-weight: bold;
  }

  .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20vh;
    width: 100%;
    height: 100%;
    position: relative;
    .theme-image {
      width: 750rpx;
      height: 453rpx;
    }
    .time-box {
      position: absolute;
      top: 238rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 412rpx;
      height: 86rpx;
      background: url("https://ustatic.hudongmiao.com/joymewScreen/img/danmuLottery/rec4.png");
      background-size: 100% 100%;
      text-align: center;
      font-size: 28rpx;
      color: #925417;
      line-height: 82rpx;
    }
    .rule-button {
      position: absolute;
      right: 17rpx;
      top: 186rpx;
      width: 76rpx;
      height: 76rpx;
      background: #ffffff;
      box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: #f8a15b;

      @media (min-aspect-ratio: 330/568) {
        top: 281rpx;
      }
    }

    .reward-button {
      position: absolute;
      right: 17rpx;
      top: 285rpx;
      width: 76rpx;
      height: 76rpx;
      background: #ffffff;
      box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: #f8a15b;

      @media (min-aspect-ratio: 330/568) {
        top: 380rpx;
      }
    }

    .rank-desc-wrapper {
      margin-top: 20rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .rank-desc {
        width: 716rpx;
        height: 222rpx;
        background-color: #fff;
        border-radius: 22rpx 22rpx 22rpx 22rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .info-wrapper {
          height: 146rpx;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          .avatar-wrapper {
            width: 146rpx;
            height: 146rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .avatar-image {
              width: 101rpx;
              height: 101rpx;
              overflow: hidden;
              border: 1px solid #f1eacf;
              border-radius: 50%;
            }
          }

          .rank-content {
            height: 100%;
            width: 360rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            .content-part1 {
              height: 26rpx;
              margin-bottom: 10rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .name-text {
                max-width: 160rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: 500;
                font-size: 26rpx;
                color: #666666;
                line-height: 26rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
              }

              .score-text {
                max-width: 160rpx;
                margin-left: 40rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: 500;
                font-size: 26rpx;
                color: #666666;
                line-height: 26rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
              }
            }

            .content-part2 {
              width: 100%;
              margin-top: 10rpx;
              height: 26rpx;
              display: flex;
              align-items: center;
              justify-content: flex-start;

              .distance-text {
                font-size: 26rpx;
                max-width: 100%;
                color: #666666;
                line-height: 26rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
              }
            }
          }

          .rank-number {
            width: 200rpx;
            height: 60rpx;
            font-weight: 900;
            font-size: 60rpx;
            color: #f68225;
            line-height: 60rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }

        .tips {
          width: 614rpx;
          height: 54rpx;
          background: #faa838;
          border-radius: 27rpx 27rpx 27rpx 27rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .text {
            height: 37rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #ffffff;
            line-height: 37rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .invite-button {
          width: 550rpx;
          height: 95rpx;
          background-image: url("https://ustatic.hudongmiao.com/miao/activity/202505/yellowButton.png");
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          .text {
            width: 371rpx;
            margin-left: 60rpx;
            font-size: 32rpx;
            color: #ffffff;
            line-height: 49rpx;
            text-align: center;
            padding-bottom: 10rpx;
            text-transform: none;
          }

          .icon {
            margin-left: 14rpx;
            width: 52rpx;
            height: 52rpx;
          }
        }
      }
    }

    .rank-list-wrapper {
      margin-top: 20rpx;
      min-height: 616rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30rpx;

      .rank-list {
        width: 716rpx;
        min-height: 616rpx;
        background-color: #fff;
        border-radius: 22rpx 22rpx 22rpx 22rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .title {
          width: 670rpx;
          height: 36rpx;
          margin-top: 32rpx;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-start;

          .title-image {
            margin-top: 20rpx;
            width: 198rpx;
            height: 21rpx;
          }

          .title-text {
            width: 255rpx;
            margin-left: 15rpx;
            margin-right: 15rpx;
            font-size: 34rpx;
            font-weight: bold;
            line-height: 49rpx;
            text-align: center;
            color: #ff990f;
          }
        }

        .tips {
          margin-top: 10rpx;
          height: 35rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
          line-height: 35rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }

        .list-head {
          width: 670rpx;
          height: 63rpx;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border: 2px solid #d8d8d8;

          .rank-field {
            width: 180rpx;
            height: 30rpx;
            // margin-left: 52rpx;
            font-weight: 700;
            font-size: 30rpx;
            color: #9b642e;
            line-height: 30rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
            border-right: 2px solid #d8d8d8;
          }

          .nickname-field {
            width: 140rpx;
            height: 30rpx;
            font-weight: 700;
            font-size: 30rpx;
            color: #9b642e;
            line-height: 30rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
            border-right: 2px solid #d8d8d8;
          }

          .reward-field {
            width: 440rpx;
            height: 43rpx;
            font-weight: 700;
            font-size: 30rpx;
            color: #9b642e;
            line-height: 43rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }

        .list {
          width: 670rpx;

          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;

          .rank-item {
            width: 670rpx;
            margin-top: 10rpx;
            height: 71rpx;
            background: #fffbdd;
            border-radius: 7rpx 7rpx 7rpx 7rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .rank {
              position: relative;
              width: 50rpx;
              height: 50rpx;
              margin-left: 55rpx;

              .rank-img {
                position: absolute;
                bottom: -5rpx;
                left: 8rpx;
                z-index: 2;

                width: 30rpx;
                height: 20rpx;
              }

              .rank-num {
                position: absolute;
                bottom: 0;
                left: 50%;
                z-index: 2;

                width: 16rpx;
                height: 16rpx;

                background: #faa838;
                border-radius: 50%;
                box-shadow: 0 0 2px 0 rgb(0 0 0 / 25%) inset;

                transform: translateX(-50%);

                display: flex;
                align-items: center;
                justify-content: center;

                font-size: 11rpx;
                color: #fff;
              }

              .avatar {
                position: absolute;
                z-index: 1;
                top: 50%;
                left: 50%;

                width: 42rpx;
                height: 42rpx;
                overflow: hidden;

                border: 1px solid #f1eacf;
                border-radius: 50%;

                transform: translate(-50%, -50%);

                .avatar-img {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .nickname {
              width: 166rpx;
              height: 37rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-left: 30rpx;
              font-weight: 500;
              font-size: 26rpx;
              color: #9b642e;
              line-height: 37rpx;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }

            .reward {
              width: 386rpx;
              height: 37rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-left: 10rpx;
              font-weight: 500;
              font-size: 20rpx;
              color: #9b642e;
              line-height: 37rpx;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }
          }

          .rank-item:nth-child(1) {
            background: linear-gradient(
              270deg,
              #ff4d05 0%,
              #faa838 100%,
              rgba(255, 251, 221, 0) 100%
            );

            .nickname {
              color: #fff;
            }

            .reward {
              color: #fff;
            }
          }

          .rank-item:nth-child(2) {
            background: linear-gradient(270deg, #ff9300 0%, #ffe41c 100%);

            .nickname {
              color: #fff;
            }

            .reward {
              color: #fff;
            }
          }

          .rank-item:nth-child(3) {
            background: linear-gradient(270deg, #f6c31d 0%, #edcf87 100%);

            .nickname {
              color: #fff;
            }

            .reward {
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
